<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue2.js"></script>
</head>

<body>
    <!-- 
   vue3过滤器不支持了-怎么办?
在 2.x中，开发者可以使用过滤器来处理通用文本格式。如时间戳。
<p>{{ accountBalance |currencyusD }}</p>
filters: {
currencyusD(value){
  return '$'+ value
}
}
虽然这看起来很方便，但它需要一个自定义语法，打破了大括号内的表达式"只是JavaScript"的假设，这不仅有学习成本，而且有实现成本。
在 3.x中，过滤器已移除，且不再支持。取而代之的是，我们建议用方法调用或计算属性来替换它们。
vue2:
https://v2.cn.vuejs.org/v2/guide
下载：https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

 -->
    <div id="box">
        <!-- {{myname}} -->
        <!-- formatDate可以任意命名 -->
        {{mytime | formatDate}}
    </div>
    <script>
        var obj = {
            el: "#box",
            data() {
                return {
                    myname: 'zhj',
                    // 在控制台输入：Date.now() 得到时间戳
                    mytime: 1707066066399
                }
            },
            filters: {
                formatDate(value) {
                    // 过滤器
                    // 过滤器中的第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据
                    var dt = new Date(value)

                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                    var d = dt.getDate().toString().padStart(2, '0')

                    var hh = dt.getHours().toString().padStart(2, '0')
                    var mm = dt.
                    getMinutes().toString().padStart(2, '0')
                    var ss = dt.getSeconds().toString().padStart(2, '0')

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

                    //也可以写成下面这样：
                    // var mydate = new Date(value)
                    // return mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate() + ' ' + mydate.getHours() + ':' + mydate.getMinutes() + ':' + mydate.getSeconds()
                }
            }
        }

        new Vue(obj) //vue2的初始化
    </script>
</body>

</html>